

import "./index.scss";
import { Layout , Menu   } from 'antd';
import {connect} from "react-redux"
import { routerList } from "../../utils/router";
import {mbdata} from "../../mobx/data"
import {observer } from "mobx-react"
import {withRouter} from "react-router-dom"
import {useState,useEffect} from "react"

const {  Sider } = Layout;
const { SubMenu } = Menu;

// 动态的侧边栏 
function MyMenu({collapsed,history,location}){
    function handleItemClick(item){
        console.log(item)
        history.push(item.key)
        // setDefaultOpenKeys(item.keyPath[1])
    }

    // 递归   函数自调用 
    const renderMenuItem = (list)=>{
        const {userInfo} = mbdata; // userInfo.role 
        if(userInfo){
            return list.map((l,i)=>{
                if(l.children){
                    if(userInfo.role * 1 < l.premission){
                        return null
                    }else{
                        return (
                            <SubMenu key={l.path} icon={l.icon} title={l.text}>
                                {
                                    renderMenuItem(l.children)
                                }
                            </SubMenu>
                        )
                    }
                }else{
                    if(userInfo.role * 1 < l.premission){
                        return null
                    }else{
                        return (
                            <Menu.Item key={l.path} icon={l.icon}>
                                {l.text}
                               
                            </Menu.Item>
                        )
                    }
                }
            })
        }else{
            return null
        }
    }

    var [defaultOpenKeys,setDefaultOpenKeys] = useState('');
    var [openkey,setOpenkey] = useState('');
    const onOpenChange=(value)=>{
        console.log(value)
        if(value.length==0 || value.length==1){
            setOpenkey(value)
            return ;
        }

        const lastOpen =  value[value.length-1];
        setOpenkey(lastOpen)
        // if(lastOpen.indexOf(value[0])){
        //     setOpenkey('')
        // }else{
        //     setOpenkey(lastOpen)
        // }
        
    }
    useEffect(()=>{
        const pathname = location.pathname;
        const value = pathname.split("/")
        var key  = '/'+value[1]+"/"+value[2];
        setOpenkey(key)
        console.log(key)
    },[])

    // const defaultOpenKeys = {}
    return (
        <div style={{width:"100%",minHeight:'100%',height:'100vh',background:""}}>
            <Sider
            trigger={null} 
            collapsible 
            collapsed={collapsed}
            style={{width:"200px",minHeight:'100%',height:'100vh'}}>
                <div className="logo"  style={{width:'100%',padding:20,marginTop:20}}>
                    <img  style={{width:'100%',display:!collapsed?'block':'none'}} src={require("../../assets/images/img/404.jpg").default } alt="" className="logo" />
                </div>
                 <Menu
                    onClick={handleItemClick}
                    defaultSelectedKeys={[location.pathname]}
                    defaultOpenKeys={[location.pathname.split("/").splice(0,3).join('/')]}
                    mode="inline"
                    theme="dark"
                    
                >   
                    {/* openKeys={[openkey]} 
                    onOpenChange={onOpenChange} */}
                    {renderMenuItem(routerList)}
                </Menu>
            </Sider> 
        </div>
        
    )
}

export default  connect(
    state=>({
        collapsed:state.getIn(['data','collapsed'])
    })
)(withRouter(observer(MyMenu)))
// HashHistory 版本 